<template>
	<view class="growthValue-content">
		<rf-navbar :title="'成长值'" @click="onBack"></rf-navbar>
		<view class="header">
			<view class="header-number">
				<view class="nowGrowthValue">当前成长值</view>
				<view class="nowNumber">{{growthValue}}</view>
			</view>
			<view class="header-logo">
				<image src="../static/images/home/growth.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="footer">
			<scroller @init="initScroller" @down="refreshData" @up="getData" :up="optUp"
				@scroll="navFloatShow(scroller)" :fixed="false">
				<view v-if="list.length>0">
					<view class="list" v-for="(item, index) in list" :key="index">
						<view class="left">
							<view class="top">{{ item.text }}</view>
							<view class="bottom">{{ item.date }}</view>
						</view>
						<view class="right">+ {{ item.number }}</view>
					</view>
				</view>
				<view class="" v-else>
					<u-empty mode="car" :marginTop="50" text="暂无数据" icon="/static/images/common/empty.png"></u-empty>
				</view>
			</scroller>

		</view>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import {
		getGrowthList,
		getTeacherInfo
	} from "@/api/user.js"


	export default {
		data() {
			return {
				growthValue: 0,
				total: 0, // 页码总长度
				list: [],

				scroller: {},
			};
		},
		onLoad() {
			getTeacherInfo().then(res => {
				this.growthValue = res.data.growthValue
			}).catch(err => {

			})
			// this.getGrowthList()
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中'
			});
			this.loadData();
		},
		methods: {
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},

			/*刷新数据*/
			refreshData() {
				uni.showLoading({
					title: '刷新中'
				});
				this.scroller.resetUpScroll();
			},

			/*加载数据*/
			loadData() {
				console.log("loadData");
				this.list = [];
				console.log("loadData1");

				this.scroller.resetUpScroll();
				console.log("loadData-end");
			},
			/*获取数据*/
			getData() {
				let _that = this

				var data = {
					pageNum: this.scroller.num,
					pageSize: this.scroller.size,
					orderByColumn: '',
					isAsc: '',
				}
				getGrowthList(data).then(res => {
					console.log("getDatagetDatagetData" + JSON.stringify(res));
					if (res.code == 200) {
						if (this.scroller.num == 1) {
							this.list = [];
						}

						this.list = this.list.concat(_that.formatArray(res.data.rows));

						this.scroller.endByPage(res.data.rows.length, res.data.total);
						// this.showPageLoading = false;
					} else {
						this.scroller.endSuccess();
						this.$alert(res.msg);
					}
				}).catch(err => {
					console.log("catch" + err);
					this.scroller.endErr();
				}).finally(() => {
					setTimeout(() => {
						_that.loading = false;
					}, 1000)
					console.log("finally");
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
			},

			onBack() {
				uni.navigateBack();
			},

			formatArray(arr) {

				return arr.map(item => {
					const date = new Date(item.updateTime.replace(/\-/g, '/'));
					const timeFormat = uni.$u.timeFormat;
					let timeValue = timeFormat(date, 'yyyy-mm-dd hh:MM:ss');

					return {
						id: item.id,
						text: item.description,
						number: item.number,
						date: timeValue,
					}
				})
			},
			getGrowthList() {
				let _that = this
				const data = {
					"pageSize": 10,
					"pageNum": 1,
					"orderByColumn": "",
					"isAsc": "",
				};
				getGrowthList(data).then(response => {
						// 处理返回的订单详情数据
						console.log("response--------------------");
						console.log(response);
						_that.list = _that.formatArray(response.data.rows)
						_that.total = response.data.total

					})
					.catch(error => {
						// 处理错误
						console.log("error----------------------");
						console.error(error);
					});
			}

		}
	};
</script>

<style lang="scss" scoped>
	.growthValue-content {
		min-height: 100vh;
		background: linear-gradient(180deg, #c6f6c3 0%, #ffffff 100%);

		.header {
			width: 686rpx;
			height: 180rpx;
			margin: auto;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			background: linear-gradient(262deg, #e9ffe8 0%, #f3fff0 100%);
			box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(88, 200, 102, 0.26);
			border: 2rpx solid #ffffff;

			.header-number {
				width: 200rpx;
				height: 110rpx;
				margin: 36rpx 0 34rpx 52rpx;

				.nowGrowthValue {
					width: 200rpx;
					height: 40rpx;
					font-size: 32rpx;
					color: #3a3d4b;
					font-weight: 400;
					line-height: 40rpx;
				}

				.nowNumber {
					width: 108rpx;
					height: 66rpx;
					font-size: 48rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #58c866;
					line-height: 66rpx;
				}
			}

			.header-logo {
				width: 190.92rpx;
				height: 146rpx;
				margin: 26rpx 30rpx 8rpx 0;


			}
		}

		.footer {
			width: 686rpx;
			height: 1160rpx;
			overflow-y: scroll;
			margin: 28rpx auto;
			border-radius: 20rpx;
			padding: 20rpx 0;
			background-color: #fff;
			box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(31, 44, 65, 0.13);

			.list {

				box-sizing: border-box;
				padding: 30rpx 32rpx 28rpx;
				border-bottom: 1rpx solid #f3f5f7;
				display: flex;

				.left {
					width: 570rpx;
					height: 82rpx;

					.top {
						font-size: 28rpx;
						font-weight: 500;
						height: 40rpx;
						line-height: 40rpx;
						color: #3a3d4b;
						margin-bottom: 8rpx;
						padding: 0rpx;
					}

					.bottom {
						font-size: 24rpx;
						font-weight: 400;
						color: #99a1af;
						line-height: 34rpx;
					}
				}

				.right {
					width: 100rpx;
					height: 44rpx;
					font-weight: 500;
					color: #58c866;
					line-height: 44rpx;
					margin-top: 18rpx;
				}
			}
		}
	}
</style>